import React, { Component } from 'react'
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import Header from '../../components/Header/Header';
import { actions,getUser } from '../../store/modules/Login';
import {Form,Button,Input} from 'antd-mobile'
import './Login.less'

class Login extends Component {
    render() {
        const {user,loginFn:{changeUser,doLogin},history:{push}}=this.props
        return (
            <div>
                <Header title="登录" register></Header>
                <Form layout="horizontal">
                    <Form.Item label='手机号'>
                        <Input placeholder='请输入姓名' clearable onChange={(e)=>changeUser("phone",e)}/>
                    </Form.Item>

                    <Form.Item label='密码'>
                        <Input placeholder='请输入密码' clearable onChange={(e)=>changeUser("password",e)}/>
                    </Form.Item>
                </Form>
                <div className="text-center">
                    <Button color="primary" onClick={()=>doLogin(push)}>登录</Button>
                </div>
            </div>
        )
    }
}

//取数据
const mapStateToProps = (state) => {
    return {
        user:getUser(state)
    };
}

//取方法
const mapDispatchToProps = (dispatch) =>{
    return {
        loginFn:bindActionCreators(actions,dispatch)
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Login)